<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商城</title>
		
	</head>
	<body>
		<div id="main">
			<div class="container">
				<div id="cart">
					<h1>购物车</h1>
					<form action="#" method="post">
						<table class="form">
							<thead>
								<tr>
									<th width="8%">选择</th>
									<th width="50%">商品</th>
									<th width="13%">单价（元）</th>
									<th width="15%">数量</th>
									<th width="14%">小计</th>
								</tr>
							</thead>
							<tbody id="cart-goods-list">
								<tr v-for="cart in productList">
									<td>
										<input type="checkbox" name="good-id" :value="1" v-model="cart.select">
									</td>
									<td class="goods">
										<div class="goods-image">
											<img v-bind:src="cart.pro_img">
										</div>
										<div class="goods-information">
											<h3>{{cart.pro_name}}</h3>
											
										</div>
									</td>
									<td>
										<span class="price">￥<em class="price-em">{{cart.pro_price.toFixed(2)}}</em></span>
									</td>
									<td>
										<div class="combo">
											<input type="button" name="minus" value="-" class="combo-minus" @click="cart.pro_num<2?cart.pro_num=1:cart.pro_num--">
											<input type="text" name="count" v-model.number="cart.pro_num" class="combo-value">
											<input type="button" name="plus" value="+" class="combo-plus" v-on:click="cart.pro_num++">
										</div>
									</td>
									<td>
										<strong class="amount">￥<em class="amount-em">{{(cart.pro_price*cart.pro_num).toFixed(2)}}</em></strong>
									</td>
								</tr>
							</tbody>
							<tfoot v-show="productList.length!=0">
								<tr>
									<td colspan="2">
										<label>
                                            <input type="checkbox" name="all" v-model="isSelectAll">
                                            <span @click="">全选</span>
                                        </label>
										<a href="#" id="cart-delete" @click="del()">删除</a>
									</td>
									<td colspan="3">
										<span>合计：</span>
										<strong id="total-amount">￥<em id="total-amount-em">{{getTotal}}</em></strong>
										<input type="submit" value="立即结算" id="settlement"
>
									</td>
								</tr>
							</tfoot>

						</table>
					</form>
					<div v-show="productList.length===0">
						购物车为空！
					</div>
				</div>
			</div>
		</div>
	</body>
	<style>
		@charset "utf-8";
		
		#main{
		    padding: 30px 0px;
		}
		
		#cart{
		    background: #FFFFFF;
		    padding: 40px;
		}
		
		#cart h1{
		    line-height: 40px;
		    padding: 0px 0px 10px 0px;
		}
		
		table.form{
		    border-collapse: collapse;
		    empty-cells: show;
		    margin: 20px 0px;
		    padding: 0px;
		    table-layout: fixed;
		    width: 100%;
		}
		
		table.form th,
		table.form td{
		    border-bottom: 1px solid #DDDDDD;
		    padding: 15px 10px;
		    text-align: left;
		}
		
		table.form{
		    border-top: 3px solid #DDDDDD;
		}
		
		.goods .goods-image img{
		    border: 1px solid #DDDDDD;
		    float: left;
		    height: 100px;
			width: 100px;
		    margin: 0px 20px 0px 0px;
		}
		.price,
		.amount,
		#total-amount{
		    color: #ff5500;
		}
		
		#total-amount{
		    font-size: 22px;
		}
		
		.price em,
		.amount em,
		#total-amount em{
		    font-style: normal;
		}
		
		.combo .combo-minus,
		.combo .combo-value,
		.combo .combo-plus{
		    background: #FFFFFF;
		    border: 1px solid #DDDDDD;
		    color: #333333;
		    float: left;
		    font-weight: bold;
		    margin: 0px;
		    outline: none;
		    text-align: center;
		}
		
		.combo .combo-minus,
		.combo .combo-plus{
		    font-size: 16px;
		    height: 26px;
		    line-height: 26px;
		    padding: 0px;
		    width: 24px;
		}
		
		.combo .combo-value{
		    border-left: none;
		    border-right: none;
		    height: 20px;
		    line-height: 20px;
		    padding: 2px;
		    width: 40px;
		}
		
		#cart-delete{
		    margin-left: 20px;
		}
		
		#settlement{
		    background: #ff5500;
		    border: none;
		    color: #FFFFFF;
		    float: right;
		    font-size: 16px;
		    height: 40px;
		    line-height: 40px;
		    margin: 0px;
		    outline: none;
		    padding: 0px;
		    width: 160px;
		}
	
	</style>
	<script src="vue.global.prod.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#cart",
			data:{
				productList:[
						{
						'pro_name': '小米 11 2K AMOLED 四曲面柔性屏',//产品名称
						'pro_num': 1,//数量
						'pro_img': '1.png',//图片链接
						'pro_price': 3498,//单价,
						'select': true ,//选中状态
					},
					{
						'pro_name': '小米 10T/Pro 至尊纪念版',//产品名称
						
						'pro_num': 1,//数量
						'pro_img': '2.png',//图片链接
						'pro_price': 2168,//单价
						'select': true //选中状态
					},
					{
						'pro_name': '小米手表 Color',//产品名称
						'pro_purity': '50ml',//规格
						'pro_service': "不支持7天无理由退货",//售后
						'pro_num': 1,//数量
						'pro_img': '3.png',//图片链接
						'pro_price': 598,//单价
						'select': true //选中状态
					}
				]
			},
			computed:{
				getTotal:function(){
					var newArr=this.productList.filter(function(val){
						return val.select===true;
					})
					var price=0;
					for(var i=0;i<newArr.length;i++){
						price+=newArr[i].pro_num*newArr[i].pro_price
					}
					return price.toFixed(2)
				},
				isSelectAll:{
					get:function(){
						return this.productList.every(function(val){
							return val.select===true;
						})
					},
					set:function(newValue){
						for(var i=0;i<this.productList.length;i++){
							this.productList[i].select=newValue;
						}
					}
				}
			},
			methods:{
				del:function(){
					if(confirm("是否删除该商品？")){
						var newArr=[];
						for(var i=0;i<this.productList.length;i++){
							if(this.productList[i].select===false){
								newArr.push(this.productList[i])
							}
						}
						this.productList=newArr;
					}
				}
			}
			
		})
	</script>
</html>
